<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-button type="primary" size="small">添加经纪</el-button>
        <div style="margin-top: 15px;">
          <el-input v-model="inputText" placeholder="请输入内容" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
        </div>
      </el-row>
      <hr>
      <!-- 表格 -->
      <el-table
        :data="agentsList"
        border
        style="width: 100%"
      >
        <el-table-column
          label="头像"
        >
          <template #default="{row}">
            <img :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          label="电话"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="desc"
          label="介绍"
        />
        <el-table-column
          label="操作"
        >
          <template>
            <el-button size="small" type="primary">编辑</el-button>
            <el-button size="small" type="danger">删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <hr>
    </el-card>
  </div>
</template>

<script>
import { getAgentsList } from '@/api/agents'
export default {
  data() {
    return {
      agentsList: [],
      inputText: ''
    }
  },
  async created() {
    const { data } = await getAgentsList()
    this.agentsList = data
  }
}
</script>

<style lang="scss" scoped>
    img {
        width: 100%;
    }
    .el-table {
        margin: 20px 0;
        // border: 1px solid black;
    }
    hr {
        border: none;
        height: 1px;
        background-color: #f3f3f5;
    }
    .el-row {
        margin-bottom: 20px;
    }
</style>
